<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <b class="line"></b>
    <div class="clear"></div>
    <div class="center" style="margin-top:0;">
      <div class="col-main">
        <div class="main-wrap">
          <div class="user-comment">
            <!--标题 -->
            <div class="am-cf am-padding">
              <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">发表评论</strong> / <small>Make&nbsp;Comments</small></div>
            </div>
            <hr />
            <div class="comment-main">
              <div class="item-opinion">
                <li v-on:click="level=3,item.level=3"><i :class="levelCheck(3)" class="op1"></i>好评</li>
                <li v-on:click="level=2"><i :class="levelCheck(2)" class="op2"></i>中评</li>
                <li v-on:click="level=1"><i :class="levelCheck(1)" class="op3"></i>差评</li>
              </div>
              <div class="comment-list">
                <div class="item-pic">
                  <a href="#" class="J_MakePoint">
                    <img v-bind:src="orderDetails.mainImg" class="itempic">
                  </a>
                </div>

                <div class="item-title">

                  <div class="item-name">
                    <a href="#">
                      <p class="item-basic-info">{{orderDetails.itemName}}</p>
                    </a>
                  </div>
                  <div class="item-info">
                    <div class="item-price">
                      价格：<strong>{{orderDetails.transPrice}}元</strong>
                    </div>
                  </div>
                </div>
                <div class="clear"></div>
                <div class="item-comment">
                  <textarea placeholder="请写下对宝贝的感受吧，对他人帮助很大哦！" v-model="comment"></textarea>
                </div>
                <div class="filePic">
                  <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
                  <span>晒照片(0/5)</span>
                  <img src="../../../assets/images/image.jpg" alt="">
                </div>

              </div>
              <div class="info-btn">
                <div class="am-btn am-btn-danger" v-on:click="saveComment()">发表评论</div>
              </div>
            </div>

          </div>

        </div>
        <!--底部-->
        <foot></foot>
      </div>
      <leftmenu></leftmenu>
    </div>
    <navfull></navfull>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'comment',
  data () {
    return {
      orderDetails: {},
      level: -1,
      comment: ""
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.qryOrders();
  },
  methods: {
    qryOrders () {
      var orderId = this.$route.query.orderId;
      var itemId = this.$route.query.itemId;
      this.axios.get("/trade/order/detail", {
        params: {
          orderId: orderId,
          itemId: itemId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.orderDetails = result.data;
        }
      })
    },
    levelCheck (level) {
      if (this.level == level) {
        return "active";
      } else {
        return "";
      }
    },
    saveComment () {
      var comment = {};
      comment.buyerComment = this.comment;
      comment.level = this.level;
      comment.type = 1;
      comment.orderId = this.orderDetails.orderId;
      comment.itemId = this.orderDetails.itemId;
      this.axios.post("/trade/comment", comment).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.$confirm("评论成功", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push({
              name: 'comments'
            })
          }).catch(() => {
          });
        }
      })
    }
  }
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/personal.css";
@import "../../../assets/css/appstyle.css";
</style>
